<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
	<style type="text/css">
	 ::-webkit-scrollbar-thumb {
		  background:#a2a2a2; 
		  border-radius: 10px;
		  height:50%;
		
		::-webkit-scrollbar{width:6px;}
	</style>
<script>
	$(document).ready(function() {
		var dataId=top.$("#dataId").val();
		$.post('/system/org/dept/selectjson/0',function(res){
			$("#deptid").append("<option value=''></option>");  
			for(var i=0;i<res.length;i++){
				//console.log(res)
				if(dataId==res[i].id){
					$("#deptid").append("<option value='"+res[i].id+"' selected=''>"+res[i].text+"</option>");  
				}else{
					$("#deptid").append("<option value='"+res[i].id+"'>"+res[i].text+"</option>");  
				}
			}
			renderForm();//表单重新渲染，要不然添加完显示不出来新的option 
	    },"json");
		
		initFormSelects("superior","/system/org/user/selectjson","");
		
	   
	});
	
	//重新渲染表单
	function renderForm(){
	    layui.use('form', function(){
	       var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	       form.render();
	    });
	}
</script>
</head>
<body style="overflow-y:scroll">
<div class="addemployee-wrap" id="employee-wrap">
	<div class="form-wrap" >
		<form class="layui-form" id="defaultForm" th:action="@{/system/org/user/save}" th:method="post" lay-filter="employee-form">
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>登录名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userid" id="userid" required  lay-verify="userid" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>中文名</label>
			    <div class="layui-input-block">
			      <input type="text" name="userName" id="userName" required  lay-verify="username" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>密码</label>
			    <div class="layui-input-block">
			      <input type="password" name="pwd" id="pwd" required  lay-verify="pwd" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>确认密码</label>
			    <div class="layui-input-block">
			      <input type="password" name="userPwd" id="userPwd" required  lay-verify="userPwd" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			      <input type="radio" name="userSex" value="1" title="男">
			      <input type="radio" name="userSex" value="0" title="女">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>手机</label>
			    <div class="layui-input-block">
			      <input type="text" name="phoneNumber" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱</label>
			    <div class="layui-input-block">
			      <input type="text" name="emailAddress" placeholder="" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">微信</label>
			    <div class="layui-input-block">
			      <input type="text" name="wechat" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>部门</label>
			    <div class="layui-input-block">
			      	<select name="city" id="deptid" name="deptid" lay-verify="deptid" xm-select="dept" xm-select-skin="normal" xm-select-type="1" >
			      	</select>
			      	<input type="hidden" id="deptids" name="deptids" lay-verify="dept"/>
			      	<input type="hidden" id="deptName" name="deptName" lay-verify="deptName"/>
			      	
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>职务</label>
			    <div class="layui-input-block">
			      <input type="text" name="post" required  lay-verify="post" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">上级</label>
			    <div class="layui-input-block">
			      <select name="superior" lay-filter="aihao" id="superior">
			        <option value=""></option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>角色</label>
			    <div class="layui-input-block">
			      <select name="roleid" id="role" lay-filter="role" lay-verify="role">
			        <option value=""></option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">分店</label>
			    <div class="layui-input-block">
			      	<select name="city" id="project" name="project" xm-select="project" xm-select-skin="normal" xm-select-type="1" >
			      	</select>
			    </div>
			</div>
			<!-- <div id="projectRole">
			
			</div>
			<div class="layui-form-item">
				<span id="add-power" class="layui-btn layui-btn-normal" style="margin-left:66px;">添加分店权限</span>
			</div> -->
			<div class="layui-form-item" style="">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
			      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			    </div>
			</div>
		</form>	
	</div>
</div>
</body>

<script th:inline="javascript">
var formSelects;
$(function(){
	var str="";
	var list= [[${projectList}]];
    for(var i = 0;i<list.length;i++){
    	str +=' <option value="'+list[i].id+'">'+list[i].text+'</option>';
    }
    $("#project").html(str);
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects'], function(){
			var layer=layui.layer,form = layui.form;
			formSelects = layui.formSelects;
			
			//初始化权限（角色）下拉  /system/org/role/selectData
			initFormSelectsExt({
				url:'/system/org/role/selectData',
				id:"role"
			});
			
			form.verify({
			  userid: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '登录名不能为空';
			      }
		      	  if(value.length<4){
			       	  return '登录名必须大于四位';
			      }
			  }
			  ,dept: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '部门不能为空';
			      }
			  }
			  ,role: function(value, item){ 
		      	  if(value==""){
			       	  return '角色不能为空';
			      }
			  }
			  ,post: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '职务不能为空';
			      }
			  }
			  ,username: function(value, item){ //value：表单的值、item：表单的DOM对象
			    if(value==""){
			    	return '用户名不能为空';
			    }else if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
			      return '用户名不能有特殊字符';
			    }
			  }
			  ,pwd: function(value, item){ //value：表单的值、item：表单的DOM对象
			     if(value==""){
			     	return '密码不能为空';
			     }
			  }
			  ,userPwd: function(value, item){ //value：表单的值、item：表单的DOM对象
			      var pwd=$("#pwd").val();
				  if(value==""){
				  	  return '确认密码不能为空';
				  }else if(pwd!=value){
					  return '两次密码不一致';
				  }
			  }
			  ,deptid: function(value, item){ //value：表单的值、item：表单的DOM对象
				  var con="";
			  	  var deptName="";
				  for(var i=0;i<formSelects.value('dept').length;i++){
					  con+=","+formSelects.value('dept')[i].val;
					  deptName+=","+formSelects.value('dept')[i].name;
				  }
				  $("#deptids").val(con.substring(1));
				  $("#deptName").val(deptName.substring(1).replace(/\s+/g,""));
			  }
			}); 
			 //添加权限；
			$("#add-power").on("click",function(){
				var str= '<div class="layui-form-item">'
			    +'<div class="layui-inline" style="margin-right: 0">'
			    +'<label class="layui-form-label"><span class="must-fill">*</span>分店</label>'
			    +'<div class="layui-input-inline" style="width:210px;margin-right: 0">'
			    +' 	<select name="project"  lay-filter="project" >';
			    var list= [[${projectList}]];
			    for(var i = 0;i<list.length;i++){
			    	str +=' <option value="'+list[i].id+'">'+list[i].text+'</option>';
			    }
			    str+='    </select></div></div>'
			    +'<div class="layui-inline" style="margin-right: 0">'
			    +'<label class="layui-form-label" style="width:36px;padding: 9px 10px 0px 0px;"><span class="must-fill">*</span>角色</label>'
			    +'<div class="layui-input-inline" style="width:210px;margin-right: 0">'
			    +'	<select name="teamRole" lay-filter="teamRole"  >'
			    +'		<option value="1">负责人</option>'
			    +'		<option value="2">员工</option>'
			    +'    </select>'
			    +'</div></div><i class="layui-icon" onclick=delRole(this)>&#x1006;</i></div>';
			    $("#projectRole").append(str);
			    layui.use('form', function(){
			    	  var form = layui.form;
			    	  form.render();
			   });
			}) 
			//监听提交
			  form.on('submit(formEmployee)', function(data){
				  var flag = true
				  var con="";
				  for(var i=0;i<formSelects.value('project').length;i++){
					  con+=",{\"projectid\":\""+formSelects.value('project')[i].val+"\",\"teamRole\":1}";
				  }
				  if(con != ""){
					  con = con.substring(1);
				  }
				  if(flag){
					  data.field.roleProject=con;
					  delete data.field["project"];//删除这个属性不参与提交，这个属性在对象中是有的而且是数组类型 如果提交会报错
					 $.post($("#defaultForm").attr('action'), data.field, function(result) {
							window.parent.layer.msg(result.msg);
							closeLayer();
						}, 'json');
				  }
					return false; 
			  });
			
		});
})
//删除分店权限
function delRole(obj){
	$(obj).parent().remove();
}
</script>
</html>